<template>
  <div>
    <div class="flex justify-between mb-2">
      <a-select
        v-model:value="caseType"
        class="w-[335px]"
        :options="caseTypeOptions"
        :disabled="!store.currentPatient.brId"
        :field-names="{ label: 'mrmName', value: 'mrmCode' }"
        placeholder="病历类型"
      />
      <div>
        <a-button :disabled="!store.currentPatient.brId" @click="onPrint">打印病程</a-button>
        <div class="absolute top-[-9999px] hidden">
          <a-button ref="printMe" v-print="{ id: 'printMe' }">打印</a-button>
          <PrintView id="printMe" :print-data="printData" />
        </div>
      </div>
    </div>
    <a-form :disabled="!store.currentPatient.brId || store.currentPatient.status === 1 || store.currentPatient.status === 1">
      <!-- 西医病历 -->
      <div class="case-table my-2">
        <div v-for="item in WMItems" :key="item.value" class="case-item">
          <template v-if="item.label === '处置'">
            <div class="label flex-col justify-center !items-start">
              <div>{{ item.label }}</div>
            </div>
            <div class="content">
              <a-textarea v-model:value="formState[item.value]" placeholder="请输入" :rows="4" />
            </div>
          </template>

          <template v-else>
            <div class="label">
              <span v-if="item?.required" class="required">*</span>
              {{ item.label }}
            </div>
            <div class="content h-12">
              <SelectTable
                v-if="item.label === '初步诊断'"
                v-model:value="formState[item.value]"
                type="诊断"
                :disabled="!store.currentPatient.brId || store.currentPatient.status === 1"
                @select="onSelect(item.value, item.code, $event)"
              />
              <SelectTable
                v-if="item.label === '其他诊断'"
                v-model:value="formState[item.value]"
                multiple
                type="诊断"
                :auto-mark="false"
                :disabled="!store.currentPatient.brId || store.currentPatient.status === 1"
                @select="onSelect(item.value, item.code, $event)"
              />
              <SelectTags v-else v-model:value="formState[item.value]" show-setting show-new multiple type="医嘱字典" :search-params="{ blcybh: item.label }" />
            </div>
          </template>
        </div>
      </div>
      <a-divider />
      <div class="case-table my-2">
        <div class="case-item">
          <div class="label flex-col justify-center !items-start">
            <div>疗程记录</div>
          </div>
          <div class="content">
            <a-textarea v-model:value="formState.courseRecord" placeholder="请输入" :rows="4" />
          </div>
        </div>
        <div class="case-item">
          <div class="label flex-col justify-center !items-start">
            <div>疗程结果</div>
          </div>
          <div class="content">
            <a-textarea v-model:value="formState.courseResult" placeholder="请输入" :rows="4" />
          </div>
        </div>
      </div>
      <div class="flex justify-end mt-4">
        <a-button class="mr-4" @click="formState = {}">重置</a-button>
        <a-button type="primary" :disabled="!formState.bcLczdZdmc || store.currentPatient.status === 1" @click="onSubmit">保存</a-button>
      </div>
    </a-form>
  </div>
</template>
<script setup>
import { ref, watch, watchEffect, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SelectTags from '@/components/SelectTags'
import SelectTable from '@/components/SelectTable'
import useStore from '../../store'
import PrintView from './PrintView'

const emit = defineEmits(['success'])
const store = useStore()
const formState = ref({})
const printData = ref()
const printMe = ref()
const WMItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '体格检查', value: 'bcTgjc' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '初步诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm', required: true },
  { label: '其他诊断', value: 'bcQtzdZdmc', code: 'bcQtzdZddm' },
  { label: '注意事项', value: 'bcZysx' },
  { label: '处置', value: 'bcCz' }
])
const isArmy = getSystemConfig('NAVYHIS_MODE') === '1' //军用系统

//获取病历信息
const getData = async () => {
  const res = await post('/course/courseProgressNotes/getCourseProgressNotes', {
    lsh: store.currentPatient.lsh,
    brId: store.currentPatient.brId
  })
  res.data?.mrmCode && (caseType.value = res.data?.mrmCode)
  formState.value = res.data || {}
}
// 打印病程
const onPrint = async () => {
  const { code, msg, data } = await post('/course/statisticalQuery/printSurgicalNotice', { lsh: store.currentPatient.lsh })
  if (code !== 0) return message.error(msg)
  if (isArmy) {
    printData.value = JSON.parse(data)
    setTimeout(() => {
      printMe.value.$el.click()
    }, 1000)
  } else {
    window.openExe?.rpt(data) //调用winform打印
  }
}
//获取病历类型
const caseTypeOptions = ref([])
const caseType = ref()
const getCaseType = async () => {
  const res = await post('/common/const/getMedicalRecordMode', { mrmType: 1 })
  caseTypeOptions.value = res.data || []
  caseType.value = res.data?.[0]?.mrmCode
}
//保存病历信息
const onSubmit = async () => {
  const res = await post('/course/courseProgressNotes/doSaveCourseProgressNotes', {
    ...formState.value,
    brId: store.currentPatient.brId,
    registerLsh: store.currentPatient.lsh,
    mrmCode: caseType.value
  })
  if (res.code !== 0) return message.error(res.msg || '保存失败')
  message.success(res.msg)
  getData()
  emit('success')
}

watch(
  () => store.tempCase,
  () => {
    formState.value = store.tempCase
  }
)

const onSelect = (value, code, select) => {
  formState.value[value] = select.zdmc
  formState.value[code] = select.zddm
}
watchEffect(() => {
  if (store.currentPatient.lsh) {
    getData()
  } else {
    formState.value = {}
  }
})
onMounted(() => {
  getCaseType()
})
</script>
<style lang="less" scoped>
.case-table {
  --border-color: rgba(125, 125, 125, 0.16);
  border: 1px solid var(--border-color);
  .case-item {
    display: flex;
    .label {
      display: flex;
      align-items: center;
      width: 120px;
      padding: 8px 16px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      .required {
        margin-right: 2px;
        margin-left: -8px;
        color: red;
        line-height: 30px;
      }
    }
    .content {
      flex: 1;
      overflow: hidden;
      border-bottom: 1px solid var(--border-color);
      :deep(.ant-input) {
        height: 100%;
        border: none;
        border: 1px solid transparent;
        border-radius: 0;
        &:focus {
          background: var(--edit-cell-color);
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
      }
      :deep(.ant-input-affix-wrapper) {
        height: 100%;
        background: var(--bg-color);
        border: 1px solid transparent;
        border-radius: 0;
        &-focused {
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
        .ant-input {
          border: none;
        }
      }
    }
    &:last-child {
      .content,
      .label {
        align-items: flex-start;
        border-bottom: none;
      }
    }
  }
}
</style>
